<div class="box box-primary">
    <div class="box-header with-border">
        <div class="box-title">
            <button type="submit" class="btn btn-primary" (click)="openModal(1)">新增</button>
            <button type="submit" class="btn btn-primary" (click)="checkRation()">批量复核</button>
        </div>
    </div>
    <div class="box box-body">
        <!-- 查询条件 -->
        <form class="form-inline">
            <div class="form-group ext-from-item">
                <label for="vcRationCode">配售对象编码：</label>
                <input type="text" class="form-control" name="vcRationCode" id="vcRationCode" [(ngModel)]="searchBody.vcRationCode" placeholder="配售对象编码">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcRationName">配售对象名称：</label>
                <input type="text" class="form-control" name="vcRationName" id="vcRationName" [(ngModel)]="searchBody.vcRationName" placeholder="配售对象名称">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcFundCode">所属基金：</label>
                <input type="text" class="form-control" name="vcFundCode" id="vcFundCode" [(ngModel)]="searchBody.vcFundCode" placeholder="所属基金">
            </div>
            <div class="form-group ext-from-item">
                <label for="vcDateState">数据状态：</label>
                <select class="form-control" id="vcDateState" name="vcDateState" [(ngModel)]="searchBody.vcDateState">
                    <option value=""></option>
                    <option value="0">待复核</option>
                    <option value="1">已复核</option>
                    <option value="-1">待匹配</option>
                </select>
            </div>
            <div class="form-group ext-from-item">
                <button type="submit" class="btn btn-primary" (click)="search()">查询</button>
                <button type="submit" class="btn btn-warning" (click)="resetSearch()">重置</button>
            </div>
        </form>
        <!-- 查询条件 END-->
        <!-- 列表-->
        <div class="table-scroll-content">
            <table class="table table-bordered table-keep-line table-hover table-striped pull-right align-center">
                <tr>
                    <th><input type="checkbox" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()"></th>
                    <th>配售对象编码</th>
                    <th>配售对象名称</th>
                    <th>组合代码</th>
                    <th>数据状态</th>
                    <th>协会编码</th>
                    <th>万德机构代码</th>
                    <th>万德机构名称</th>
                    <!-- <th>状态</th> -->
                    <th>操作</th>
                </tr>
                <tr *ngFor="let allotmentObj of allotmentObjList">
                    <td>
                        <input type="checkbox" [(ngModel)]="allotmentObj.isChecked" (ngModelChange)="checked(allotmentObj)">
                    </td>
                    <td>
                        <!-- 配售对象编码 -->
                        {{allotmentObj.vcRationCode}}
                    </td>
                    <td>
                        <!-- 配售对象名称 -->
                        {{allotmentObj.vcRationName}}
                    </td>
                    <td>
                        <!-- 组合代码 -->
                        {{allotmentObj.vcFundCode}}
                    </td>
                    <td>
                        <!-- 数据状态 -->
                        {{allotmentObj.vcDateState == 0 ? "待复核" : allotmentObj.vcDateState == 1 ? "已复核" : "待匹配"}}
                    </td>
                    <td>
                        <!-- 协会编码 -->
                        {{allotmentObj.vcXiehuiCode}}
                    </td>
                    <td>
                        <!-- 万德机构代码 -->
                        {{allotmentObj.windOrgCode}}
                    </td>
                    <td>
                        <!-- 万德机构名称 -->
                        {{allotmentObj.windOrgName}}
                    </td>
                    <!-- <td>{{allotmentObj.stat =="0" ? "有效" : "无效"}}</td> -->
                    <td>
                        <!-- 操作 -->
                        <button type="submit" class="btn btn-primary btn-sm" (click)="openModal(0,allotmentObj)">修改</button>
                        <button type="submit" class="btn btn-warning btn-sm" (click)="deleteAllotmentObj(allotmentObj.vcRationCode)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 列表 END-->
    </div>
    <div class="box-footer clearfix">
        <!-- 分页 Begin -->
        <app-pagination
            [currentPageNum]="pageInfo.currentPageNum"
            [pagesShow]="pageInfo.pagesShow"
            [totalPages]="pageInfo.totalPages"
            (pageChanged)="pageNavigation($event)">
            <div class="pull-left pagination-detail" data-pagination-additional="true">
                <span class="pagination-info">
                    当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条
                </span>
                <span class="page-list">
                    <span class="btn-group dropup">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{pageInfo.pageSize}}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li *ngFor="let i of pageInfo.pageList" role="menuitem"
                                [class.active]="pageInfo.pageSize === i"
                                (click)="pageSizeChange(i)">
                            <a href="javascript:void(0)">{{i}}</a>
                            </li>
                        </ul>
                    </span> 
                    条记录每一页
                </span>
            </div>
        </app-pagination>
        <!-- 分页 End-->
    </div>
</div>
<!-- 新增/更新配售对象 Begin -->
<div class="modal fade" id="allotmentModal" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 *ngIf="isAdd == 1" class="modal-title">新增配售对象</h4>
                <h4 *ngIf="isAdd == 0" class="modal-title">修改配售对象</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="vcRationCode">配售对象编码：</label>
                        <input *ngIf="isAdd == 1" type="text" class="form-control allotmentModal-input" name="vcRationCode" id="vcRationCode" placeholder="配售对象编码" [(ngModel)]="allotmentObj.vcRationCode">
                        <input *ngIf="isAdd == 0" type="text" class="form-control allotmentModal-input" name="vcRationCode" id="vcRationCode" placeholder="配售对象编码" [(ngModel)]="allotmentObj.vcRationCode" readonly>
                    </div>
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="vcRationName">配售对象名称：</label>
                        <input type="text" class="form-control allotmentModal-input" name="vcRationName" id="vcRationName" placeholder="配售对象名称" [(ngModel)]="allotmentObj.vcRationName">
                    </div>
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="vcFundCode">组合代码：</label>
                        <input type="text" class="form-control allotmentModal-input" name="vcFundCode" id="vcFundCode" placeholder="所属基金" (click)="openFundOrWindModal(allotmentObj,'fund')" [(ngModel)]="allotmentObj.vcFundCode" readonly style="cursor:pointer">
                    </div>
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="vcXiehuiCode">协会编码：</label>
                        <input type="text" class="form-control allotmentModal-input" name="vcXiehuiCode" id="vcXiehuiCode" placeholder="协会编码" [(ngModel)]="allotmentObj.vcXiehuiCode">
                    </div>
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="windOrgCode">万德机构编码:</label>
                        <div class="input-group">
                        <input type="text" class="form-control allotmentModal-input" name="windOrgName" id="windOrgName" placeholder="万德机构名称" [(ngModel)]="allotmentObj.windOrgCode">
                            <span class="input-group-btn">
                                <button style="position: relative; left: -100%;" class="btn btn-default" type="button" (click)="openFundOrWindModal(allotmentObj,'Wind')" >...</button>
                            </span>
                        </div>
                    </div>
                    <div class="ext-from-item row">
                        <label class="col-sm-3 col-sm-offset-2" for="windOrgName">万德机构名称：</label>
                        <input type="text" class="form-control allotmentModal-input" name="windOrgName" id="windOrgName" placeholder="万德机构名称" [(ngModel)]="allotmentObj.windOrgName">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button *ngIf="isAdd == 1" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" (click)="addAllotmentObj()">新增</button>
                <button *ngIf="isAdd == 0" type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" (click)="updateAllotmentObj()">更新</button>
                <button type="button" class="btn btn-default col-sm-2" (click)="closeModal()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 新增/更新配售对象 End -->
<!-- 基金/万德选择模态框 Begin -->
<div class="modal fade" id="fundOrWindModal" tabindex="-1" role="dialog" aria-labelledby="新增">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 *ngIf="modalOpt.fundOrWind == 'fund'" class="modal-title">选择组合</h4>
                <h4 *ngIf="modalOpt.fundOrWind == 'Wind'" class="modal-title">选择万德机构</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="ext-from-item row">
                        <label *ngIf="modalOpt.fundOrWind == 'fund'" class="col-sm-2" for="firstInput">配售对象编码：</label>
                        <label *ngIf="modalOpt.fundOrWind == 'Wind'" class="col-sm-2" for="firstInput">万德机构代码：</label>
                        <div class="col-sm-3">
                            <input *ngIf="modalOpt.fundOrWind == 'fund'" type="text" class="form-control" name="firstInput" id="firstInput" placeholder="基金代码"      [(ngModel)]="modalFundSearch.vcFundCode">
                            <input *ngIf="modalOpt.fundOrWind == 'Wind'" type="text" class="form-control" name="firstInput" id="firstInput" placeholder="万德机构代码"  [(ngModel)]="modalWindSearch.windOrgCode">
                        </div>
                        <label *ngIf="modalOpt.fundOrWind == 'fund'" class="col-sm-2" for="secondInput">配售对象名称：</label>
                        <label *ngIf="modalOpt.fundOrWind == 'Wind'" class="col-sm-2" for="secondInput">万德机构名称：</label>
                        <div class="col-sm-3">
                            <input *ngIf="modalOpt.fundOrWind == 'fund'" type="text" class="form-control" name="secondInput" id="secondInput" placeholder="基金名称"      [(ngModel)]="modalFundSearch.vcFundName">
                            <input *ngIf="modalOpt.fundOrWind == 'Wind'" type="text" class="form-control" name="secondInput" id="secondInput" placeholder="万德机构名称"  [(ngModel)]="modalWindSearch.windOrgName">
                        </div>
                        <button class="btn btn-primary" (click)="fundOrWindModalSearch()">搜索</button>
                    </div>
                </form>
                <!-- 列表-->
                <div class="table-scroll-content">
                    <table class="table table-bordered table-keep-line table-hover table-striped pull-right align-center">
                        <tr>
                            <th>选择</th>
                            <th>基金代码</th>
                            <th>基金名称</th>
                        </tr>
                        <tr *ngIf="modalData == null">
                            <td colspan="3">
                                暂无数据
                            </td>
                        </tr>
                        <tr *ngFor="let x of modalData">
                            <td>
                                <!-- 选中 -->
                                <input type="radio" name="modalRadio" (click)="fundModalChecked(x,$event)">
                            </td>
                            <td>
                                <!-- 基金代码 -->
                                {{x.vcFundCode}}
                            </td>
                            <td>
                                <!-- 基金名称 -->
                                {{x.vcFundName}}
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- 列表 END-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary col-sm-2 col-sm-offset-4" data-dismiss="modal" (click)="confirmModalData()">确定</button>
                <button type="button" class="btn btn-default col-sm-2" (click)="closeFundOrWindModal()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 基金/万德选择模态框 End -->